<template>
  <el-card shadow="never">
    <template #header>
      <CardTitle title="用户统计" />
    </template>
    <!-- 折线图 -->
<!--    <Echart :height="300" :options="lineChartOptions" />-->
    <div class="el-card dawn-radius bg-white" v-loading="bfzzbShow">
      <el-skeleton :loading="bfzzbShow" animated>
        <Echart :options="bfzzbData" style="height: 300px"/>
      </el-skeleton>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { EChartsOption } from 'echarts'
import * as MemberStatisticsApi from '@/api/hosp/statics/member'
import * as StaticsApi from '@/api/hosp/statics'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
import { line_p } from "@/views/Home/echarts-data";
import {set} from "lodash-es";

/** 会员用户统计卡片 */
defineOptions({ name: 'MemberStatisticsCard' })

const { t } = useI18n() // 国际化

const bfzzbShow = ref(true)
const bfzzbData = reactive<EChartsOption>(line_p) as EChartsOption
const loading = ref(true) // 加载中
/** 折线图配置 */
const lineChartOptions = reactive<EChartsOption>({
  dataset: {
    dimensions: ['date', 'count'],
    source: []
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 80,
    containLabel: true
  },
  legend: {
    top: 50
  },
  series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
  toolbox: {
    feature: {
      // 数据区域缩放
      dataZoom: {
        yAxisIndex: false // Y轴不缩放
      },
      brush: {
        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
      },
      saveAsImage: { show: true, name: '会员统计' } // 保存为图片
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: [5, 10]
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: (date: string) => formatDate(date, 'MM-DD')
    }
  },
  yAxis: {
    axisTick: {
      show: false
    }
  }
}) as EChartsOption

const getMemberRegisterCountList = async () => {
  loading.value = true
  bfzzbShow.value = true
  // 查询最近一月数据
  const beginTime = dayjs().subtract(30, 'd').startOf('d')
  const endTime = dayjs().endOf('d')
  const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime);
  const list1 = await StaticsApi.patientCount({ type:"1", beginTime: formatDate(beginTime), endTime: formatDate(endTime) });
  // console.table(list);
  // console.table(list1);


  set(
    bfzzbData,
    'xAxis.data',
    list.map((v) => t(v.date))
  )
  set(
    bfzzbData,
    'legend.data',
    ['注册数','建档数']
  )
  set(bfzzbData, 'series', [
    {
      name: '注册数',
      smooth: true,
      type: 'line',
      // stack: 'Total',
      showSymbol: false,
      lineStyle: {
        width: 0
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 人';
        }
      },
      data: list.map((v) => v.count),
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '建档数',
      smooth: true,
      type: 'line',
      // stack: 'Total',
      showSymbol: false,
      lineStyle: {
        width: 0
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      itemStyle: {},
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 人';
        }
      },
      data: list1.map((v) => v.count),
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ])

  // 更新 Echarts 数据
  // if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
  //   lineChartOptions.dataset['source'] = list
  // }
  bfzzbShow.value = false
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  getMemberRegisterCountList()
})
</script>
